<!-- 颁发校园骑行证 -->

<style>
  .ivu-table th {
    /* 《颁发校园骑行证》表头 */
    background-color: rgba(255, 232, 134, 0.3);
  }

  .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
  .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
    /* 表格隔行 */
    background-color: rgba(255, 232, 134, 0.1);
  }
  /* aee8fe */

  .ivu-btn-success {
    /* 生成骑行证按钮  */
    color: #ffffff !important;
    font-weight: bold;
    background-color: #28cca0 !important;
    border: #28cca0 !important;
  }

  .ivu-btn {
    /* 此页面所有按钮 */
    color: #9c4366;
    border: 2px solid #ffa3b2;
  }
</style>

<div
  id="printCardBox"
  style="background: #fff; padding: 24px; margin-bottom: 140px"
>
  <div id="printCard">
    <!-- i-col标签要加，不加有BUG -->
    <i-col>
      <!-- 加载动效 -->
      <Spin fix v-if="spinShow">
        <div style="height: 110px">
          <img class="loadImg spin-icon-load" src="images/轮.png" />
        </div>
        <p style="color: #999999">请求数据中</p>
      </Spin>
      <!-- @on-selection-change="whichSelect" 只要选中哪一项就发生改变  返回值为selection,即选框的type-->
      <!-- resizable -->
      <i-table
        height="550"
        stripe
        ref="selection"
        :columns="printColumns"
        :data="printInformation"
        @on-selection-change="whichSelect"
      ></i-table>
    </i-col>
  </div>
  <!-- <div id="endBox"></div> -->
  <div style="float: right; padding-top: 20px">
    <!-- 刷新 -->
    <i-button @click="getUsers" icon="md-refresh">刷新</i-button>

    <i-button @click="handleSelectAll(true)">全选</i-button>
    <i-button @click="handleSelectAll(false)">取消全选</i-button>

    <!-- 吴颖浩修改 -->
    <i-button type="success" @click="saveInfoInSession">
      生成骑行证
      <!-- <a href="printPicture.html" target="new">生成骑行证</a> -->
    </i-button>
  </div>
</div>

<script>
  // 管理vue
  new Vue({
    el: "#printCardBox",
    data: {
      // 控制加载动画
      spinShow: true,

      printColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "姓名",
          key: "name",
          // fixed: 'left',
          width: 70,
        },
        {
          title: "人员类别",
          key: "person_type",
          width: 120,
          filters: [
            {
              label: "教工",
              value: "教工",
            },
            {
              label: "学生",
              value: "学生",
            },
            {
              label: "合同工",
              value: "合同工",
            },
            {
              label: "校内住户（租户）",
              value: "校内住户（租户）",
            },
            {
              label: "驻校服务机构工作人员",
              value: "驻校服务机构工作人员",
            },
            {
              label: "其他",
              value: "其他",
            },
          ],
          filterMethod(value, row) {
            return row.person_type.indexOf(value) > -1;
          },
        },
        {
          title: "手机号码",
          key: "phone",
          width: 125,
        },
        {
          title: "证件号类型",
          key: "certificate_type",
          width: 130,
          filters: [
            {
              label: "工作证号",
              value: "工作证号",
            },
            {
              label: "学号",
              value: "学号",
            },
            {
              label: "身份证号",
              value: "身份证号",
            },
          ],
          filterMethod(value, row) {
            return row.certificate_type.indexOf(value) > -1;
          },
        },
        {
          title: "证件号",
          key: "certificate_id",
          width: 180,
        },
        {
          title: "所在校区",
          key: "campus",
          width: 160,
          filters: [
            {
              label: "中校区",
              value: "中校区",
            },
            {
              label: "南校区",
              value: "南校区",
            },
            {
              label: "北校区",
              value: "北校区",
            },
            {
              label: "东校区",
              value: "东校区",
            },
            {
              label: "西校区",
              value: "西校区",
            },
          ],
          filterMethod(value, row) {
            return row.campus.indexOf(value) > -1;
          },
        },

        // 筛选
        {
          title: "骑行证类型",
          key: "passport_type",
          width: 125,
          filters: [
            {
              label: "正式",
              value: "正式",
            },
            {
              label: "临时",
              value: "临时",
            },
          ],
          // 单选
          filterMethod(value, row) {
            return row.passport_type.indexOf(value) > -1;
          },
        },
        {
          title: "骑行证号码",
          key: "passport_id",
          width: 150,
        },
        {
          title: "是否已打印",
          key: "havenot_print",
          // fixed: 'right',
          // width: 125,
          filters: [
            {
              label: "未打印",
              value: 0,
            },
            {
              label: "已打印",
              value: 1,
            },
          ],
          filterMethod(value, row) {
            return row.havenot_print.indexOf(value) > -1;
          },
        },
      ],
      printInformation: [],
      // 选中记录的数据
      selectionData: [],
    },
    methods: {
      // 获取选择记录
      whichSelect(haveSelection) {
        this.selectionData = haveSelection;
        console.log(this.selectionData);
      },

      // 吴颖浩修改
      // 会话存储   JSON.stringify(this.printInformation)转成字符串对象
      saveInfoInSession() {
        if (this.selectionData.length == 0) {
          this.$Message.warning({
            content: "请选择至少一条记录生成骑行证！",
            duration: 3,
            background: true,
          });
        } else {
          // 顺序不能调
          sessionStorage.setItem("proofs", JSON.stringify(this.selectionData));
          window.open("printPicture.html");
        }
      },
      getUsers() {
        var that = this;
        // 数组[]才有splice函数，对象没有
        that.printInformation.splice(0, that.printInformation.length); //清空数组
        that.spinShow = true;
        that.$Loading.start();
        $.ajax({
          url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/select_havenot_print",
          type: "POST",
          success(res) {
            if (res.error_code == 0) {
              that.printInformation = res.data;
              // that.loading = false,
              //     that.getUsers
            } else if (res.error_code == 1) {
              that.$Notice.error({
                title: res.msg,
              });
            }
          },
          error(res) {
            console.log("请求发送失败");
          },
          complete() {
            that.$Loading.finish();
            that.spinShow = false;
          },
        });
      },
      // 全选
      handleSelectAll(status) {
        this.$refs.selection.selectAll(status);
      },
    },
    mounted: function () {
      this.getUsers();
    },
  });
</script>
